<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <!--<link rel="stylesheet" href="./css/font.css">-->
        <link rel="stylesheet" href="./css/index.css">
        <link rel="stylesheet" href="./css/iconfont.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/index.js"></script>
        <script src="./js/jquery.js"></script>
        <script src="./js/jquery.min.js"></script>
       <!--  <script src="./js/survey.js"></script> -->
        <style>
            #FontScroll{
                width: 100%;
                height: 245px;
                overflow: hidden;
            }
            #FontScroll ul li{
                height: 32px;
                width: 100%;
                color: #ffffff;
                line-height: 32px;
                overflow: hidden;
                font-size: 14px;
            }
            #FontScroll ul li i{
                color: red;
            }
            .layui-table td, .layui-table th{
                min-width: auto !important;
            }
        </style>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                           <div id="main" style="width: 600px;height:400px;margin: 0 auto"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
        var option = {
        		  // ----  标题 -----
        		  title: {
        		    text: '歌曲数量',
        		    textStyle: {
        		      color: 'red'
        		    },
        		    subtext: '各种风格的歌曲数量',
        		    subtextStyle: {
        		      color: 'blue'
        		    },
        		    padding: [0, 0, 10, 100]  // 位置
        		  },
        		  // ---- legend ----
        		  legend: {
        		    type: 'plain',  // 图列类型，默认为 'plain'
        		    top: '1%',  // 图列相对容器的位置 top\bottom\left\right
        		    selected: {
        		    },
        		    textStyle: {  // 图列内容样式
        		      color: '#fff',  // 字体颜色
        		      backgroundColor: 'black'  // 字体背景色
        		    },
        		    tooltip: {  // 图列提示框，默认不显示
        		      show: true,
        		      color: 'red'  
        		    },
        		    data: [   // 图列内容
        		      {
        		        name: '歌曲数量',
        		        icon: 'circle',
        		        textStyle: {
        		          color: 'red',  // 单独设置某一个图列的颜色
        		          backgroundColor: '#fff' // 单独设置某一个图列的字体背景色
        		        }
        		      }
        		    ]
        		  },
        		  // ---  提示框 ----
        		  tooltip: {
        		    show: true,   // 是否显示提示框，默认为true
        		    trigger: 'item', // 数据项图形触发
        		    axisPointer: {   // 指示样式
        		      type: 'shadow',
        		      axis: 'auto'
        		    },
        		    padding: 5,
        		    textStyle: {   // 提示框内容的样式
        		      color: '#fff'  
        		    }
        		  },
        		  // ---- gird区域 ---
        		  gird: {
        		    show: false,    // 是否显示直角坐标系网格
        		    top: 80,  // 相对位置 top\bottom\left\right
        		    containLabel: false, // gird 区域是否包含坐标轴的刻度标签
        		    tooltip: {
        		      show: true,
        		      trigger: 'item',   // 触发类型
        		      textStyle: {
        		        color: '#666'
        		      }
        		    }
        		  },
        		  //  ------  X轴 ------
        		  xAxis: {
        		    show: true,  // 是否显示
        		    position: 'bottom',  // x轴的位置
        		    offset: 0, // x轴相对于默认位置的偏移
        		    type: 'category',   // 轴类型， 默认为 'category'
        		    name: '歌曲分类',    // 轴名称
        		    nameLocation: 'end',  // 轴名称相对位置
        		    nameTextStyle: {   // 坐标轴名称样式
        		      color: 'red',
        		      padding: [5, 0, 0, -5]
        		    },
        		    nameGap: 15, // 坐标轴名称与轴线之间的距离
        		    nameRotate: 0,  // 坐标轴名字旋转
        		    axisLine: {       // 坐标轴 轴线
        		      show: true,  // 是否显示
        		      symbol: ['none', 'arrow'],  // 是否显示轴线箭头
        		      symbolSize: [8, 8], // 箭头大小
        		      symbolOffset: [0, 7],  // 箭头位置
        		      // ------   线 ---------
        		      lineStyle: {
        		        color: 'blue',
        		        width: 1,
        		        type: 'solid'
        		      }
        		    },
        		    axisTick: {    // 坐标轴 刻度
        		      show: true,  // 是否显示
        		      inside: true,  // 是否朝内
        		      length: 3,     // 长度
        		      lineStyle: {   // 默认取轴线的样式
        		        color: 'red',
        		        width: 1,
        		        type: 'solid'
        		      }
        		    },
        		    axisLabel: {    // 坐标轴标签
        		      show: true,  // 是否显示
        		      inside: false, // 是否朝内
        		      rotate: 0, // 旋转角度
        		      margin: 5, // 刻度标签与轴线之间的距离
        		      color: 'red'  // 默认取轴线的颜色 
        		    },
        		    splitLine: {    // gird区域中的分割线
        		      show: false,  // 是否显示
        		      lineStyle: {
        		      }
        		    },
        		    splitArea: {    // 网格区域
        		      show: false  // 是否显示，默认为false
        		    },
        		    // 得到所有的歌曲风格
        		    data: []
        		  },
        		  //   ------   y轴  ----------
        		  yAxis: {
        		    show: true,  // 是否显示
        		    position: 'left', // y轴位置
        		    offset: 0, // y轴相对于默认位置的偏移
        		    type: 'value',  // 轴类型，默认为 ‘category’
        		    name: '数量',   // 轴名称
        		    nameLocation: 'end', // 轴名称相对位置value
        		    nameTextStyle: {    // 坐标轴名称样式
        		      color: '#fff',
        		      padding: [5, 0, 0, 5]  // 坐标轴名称相对位置
        		    },
        		    nameGap: 15, // 坐标轴名称与轴线之间的距离
        		    nameRotate: 270,  // 坐标轴名字旋转

        		    axisLine: {    // 坐标轴 轴线
        		      show: true,  // 是否显示
        		      //  -----   箭头 -----
        		      symbol: ['none', 'arrow'],  // 是否显示轴线箭头
        		      symbolSize: [8, 8],  // 箭头大小
        		      symbolOffset: [0, 7], // 箭头位置

        		      // ----- 线 -------
        		      lineStyle: {
        		        color: 'blue',
        		        width: 1,
        		        type: 'solid'
        		      }
        		    },
        		    axisTick: {      // 坐标轴的刻度
        		      show: true,    // 是否显示
        		      inside: true,  // 是否朝内
        		      length: 3,      // 长度
        		      lineStyle: {
        		        color: 'red',  // 默认取轴线的颜色
        		        width: 1,
        		        type: 'solid'
        		      }
        		    },
        		    axisLabel: {      // 坐标轴的标签
        		      show: true,    // 是否显示
        		      inside: false,  // 是否朝内
        		      rotate: 0,     // 旋转角度
        		      margin: 8,     // 刻度标签与轴线之间的距离
        		      color: 'red',  // 默认轴线的颜色
        		    },
        		    splitLine: {    // gird 区域中的分割线
        		      show: true,   // 是否显示
        		      lineStyle: {
        		        color: '#666',
        		        width: 1,
        		        type: 'dashed'
        		      }
        		    },
        		    splitArea: {     // 网格区域
        		      show: false   // 是否显示，默认为false
        		    }
        		  },
        		  //  -------   内容数据 -------
        		  series: [
        		    {
        		      name: '数量',      // 序列名称
        		      type: 'bar',      // 类型
        		      legendHoverLink: true,  // 是否启用图列 hover 时的联动高亮
        		      label: {   // 图形上的文本标签
        		        show: false,
        		        position: 'insideTop', // 相对位置
        		        rotate: 0,  // 旋转角度
        		        color: '#eee'
        		      },
        		      itemStyle: {    // 图形的形状
        		        color: 'blue',
        		        barBorderRadius: [18, 18, 0 ,0]
        		      },
        		      barWidth: 20,  // 柱形的宽度
        		      barCategoryGap: '20%',  // 柱形的间距
        		      // 每个风格对应的数据
        		      data: []
        		    }
        		  ]
        		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        var xStyleName = [];    
        var yMusicNum = [];
        $.ajax({
            type: 'get',
            url: '../ReportForm',//请求数据的地址
            data:{
            	op:"zhu"
            },
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(result, function (index, item) {
                	xStyleName.push(item.styleName);    //挨个取出类别并填入类别数组 
                	yMusicNum.push(item.countLikeNumber);
                });
                myChart.setOption({        //加载数据图表   
                	xAxis: {
                		data:xStyleName
                	},
                    series: [{                    
                        data: yMusicNum
                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    </script>

</html>